{% extends 'authentication/auth_base.html' %}
{% block title %} 注册 - 黑熊平台 {% endblock %}

{% block content %}

    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>黑熊平台</h2>
                <p>后台管理系统 - 注册</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-user-login-username"></label>
                    <input type="text" name="name" id="LAY-user-login-username" lay-verify="username" placeholder="用户名"
                           class="layui-input">
                </div>

                {#<div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-vercode"></label>
                        <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
                               placeholder="验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid"
                                    id="LAY-user-getsmscode">获取验证码
                            </button>
                        </div>
                    </div>
                </div>
            </div>#}

                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass"
                           placeholder="密码"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-repass"></label>
                    <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required"
                           placeholder="确认密码"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-rate"
                           for="LAY-user-login-cellphone"></label>
                    <input type="text" name="email" id="LAY-user-login-cellphone" lay-verify="email" placeholder="邮箱"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit" id="butn">注 册
                    </button>
                </div>
            </div>
        </div>


    </div>
{% endblock %}

{% block script %}
    {{ super() }}

    <script>
        // 加载模块 form
        layui.use('form', function () {
            var form = layui.form;
            form.render();    // 更新全部
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });

            //提交
            form.on('submit(LAY-user-reg-submit)', function (obj) {
                var field = obj.field;

                //确认密码
                if (field.password !== field.repass) {
                    return layer.msg('两次密码输入不一致');
                }

                $.ajax({
                    url: '{{ url_for('auther.RegisterApi') }}',
                    type: 'post',
                    async: false,
                    {#dataType: 'application/json',#}
                    data: field,   // 传递获取的字典结果
                    success: function (data) {
                        if (data.code == 10000) {
                            layer.msg('注册成功\n\n2秒后返回登陆页', {icon: 1});
                            setInterval(function () {
                                window.open("{{ url_for('auther.loginindex') }}", "_self")
                            }, 2000)
                        } else if (data.code == 10001) {
                            layer.msg('用户已存在', {icon: 5});
                        } else if (data.code == 10002) {
                            layer.msg('邮箱已存在', {icon: 5});
                        } else {
                            layer.msg('注册失败', {icon: 5});
                        }
                    }
                })

            })
        })
    </script>
{% endblock %}

